<template>
  <div class="menu-item">
    <template v-for="(item, index) in MenuItemData">
      <!-- 因为有子集和无子集渲染html标签不一样，所以要分为两种情况
           情况一：有子集的情况：-->
      <el-submenu :key="index" :index="item.path" v-if="item.children">
        <template slot="title">
          <i :class="item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <SliderBarItem :MenuItemData="item.children"></SliderBarItem>
      </el-submenu>
      <!-- 情况二：没子集的情况 -->
      <el-menu-item :key="item.meta.title" v-else :index="item.path">
        <i :class="item.meta.icon"></i>
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "SliderBarItem",
  props: {
    MenuItemData: {
      type: Array,
      default: () => [],
    },
  },
  // 注意： 在template标签上使用v-for，:key="index"不能写在template标签上，因为其标签不会被渲染，会引起循环错误
};
</script>